import callFeedback from "../modalFeedback"
import GameResult from "../modalFeedback/game.result"
import { Button,AutoCenter, Grid } from 'antd-mobile'
import { BASE_PATH } from '@/config'
import { navigateTo } from "@/utils"
import { PrizeComp } from ".."
import useApp from "@/stores/useApp"
export const useToolbar = () => {
  const setShareModalUpdate = useApp(state => state.updateShareVisible)
    const handlerShareSuccess = () => {
      console.log('success')
      setShareModalUpdate(false)
        const c = callFeedback({
            bodyClassName: 'price-result-modal rule-modal price-result-modal act-feedback-modal',
            // title: 
            content: (
              <GameResult 
                content={<div className="result-modal">
                  <div className="result-modal-text">
                    <div style={{fontWeight:'bold',fontSize:'2rem',marginTop:30}}>分享成功</div>
                    <div style={{marginTop:'20px',textIndent:0}}>答题机会+1</div>
                  </div>
              </div>}
              />
            ),
            actions: [
              <Button key={`confirm`} onClick={async e => {
                c.close()
                // navigateTo('/game')
              }}  className="act-btn act-btn-bevel">确定</Button>,
            ],
            closeOnAction: false,
            closeOnMaskClick: false,
          
          })
    }
    const handleGameSuccess = (config = {}) => {
        const c = callFeedback({
            bodyClassName: 'price-result-modal rule-modal price-result-modal act-feedback-modal',
            title: <div></div>,
            content: <div style={{marginTop:'10px'}}>
              <AutoCenter><img className="result-icon" src={`${BASE_PATH}/img/game/result-success-icon.png`} width={48} /></AutoCenter>
              <AutoCenter><span style={{fontWeight:'bold'}}>恭喜您回答正确！</span></AutoCenter>
              <AutoCenter style={{lineHeight:1.6}}>{config.message}</AutoCenter>
            </div>,
            actions: config.next_paper ? <Grid columns={2} gap={10} >
            <Grid.Item style={{padding: '0 10px'}}>
            <Button shape="rounded" key={`confirm`} onClick={async e => {
              c.close();
              
              config.onCancel&&config?.onCancel()
              // Toast.show({content: `分享成功`});
              
            }} className="act-btn act-btn-bevel">下一题</Button>
            </Grid.Item>
            <Grid.Item>
            
            <Button shape="rounded" key="share" className="act-btn act-btn-bevel " onClick={async e => {
              c.close()
              // navigateTo(`/wheel`)
              config.onConfirm&&config.onConfirm()
                }}>去抽奖</Button>
            
            
            </Grid.Item>
          </Grid>:<Button shape="rounded" key="prize" className="act-btn act-btn-bevel " onClick={async e => {
              c.close()
              config.onConfirm&&config.onConfirm()
                }}>去抽奖</Button>,

closeOnAction: false,
hideClose:true,
closeOnMaskClick: false,
          })
    }
    const handleShowPrize = () => {
        const m = callFeedback({
          bodyClassName: `act-feedback-modal rule-modal`,
          title: <div>我的奖品</div>,
          content: <div className="inner"><PrizeComp /></div>,
          actions: <Button shape={`rounded`}
        //   loading={loading}
          className="act-btn act-btn-bevel"
          onClick={async e => {
            m.close()
            navigateTo(`/wheel`)
          }}
  >
    去抽奖
  </Button>,
          closeOnAction: true,
          closeOnMaskClick: true,
        })
      }
    return {
        handlerShareSuccess,
        handleGameSuccess,
        handleShowPrize
    }
}